<!-- 评论 -->
<template>
<div class='comment'>
    <div class="header">
       <div class="time">
          <span>时间选择:</span>
          <div class="tab">
               <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
               <el-radio-button label="top">全部</el-radio-button>
               <el-radio-button label="right">今天</el-radio-button>
               <el-radio-button label="bottom">昨天</el-radio-button>
               <el-radio-button label="left">最近7天</el-radio-button>
               <el-radio-button label="left">最近30天</el-radio-button>
               <el-radio-button label="left">本月</el-radio-button>
            </el-radio-group>
          </div>
          <div>
              <el-date-picker
               v-model="value1"
               type="date"
               placeholder="选择日期">
            </el-date-picker>
          </div>
       </div>
       <div class="state">
        <div>
           <span>评论状态</span>
            <el-select v-model="value" placeholder="请选择评论状态">
            <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
            </el-option>
         </el-select>

        </div>
         <div class="shop1">
           <span>商品搜索：</span>
            <input placeholder="请输入商品名称" v-model="search"/>
              <el-button icon="el-icon-search" circle @click="searchItem"></el-button>
        </div>
        <div>
           <span>用户名称: </span>
            <input placeholder="请输入用户名称" v-model="search1"/>
           <el-button icon="el-icon-search" circle @click="searchUser"></el-button>
        </div>
       </div>
       <div>
           <el-button type="primary" @click="addComment">添加虚拟评论</el-button>
       </div>
    </div>
    <div class="main">
       <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="ID"
      width="160">
    </el-table-column>
    
   <el-table-column
      label="商品信息"
      width="150">
      <template slot-scope="scope">
          <img :src="scope.row.img" alt="">
    </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="用户名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="num"
      label="商品评分"
      width="120">
    </el-table-column>
    <el-table-column
      prop="num1"
      label="服务评分"
      width="120">
    </el-table-column>
    <el-table-column
      prop="title"
      label="评价内容"
      width="120">
    </el-table-column>
      <el-table-column
      prop="title"
      label="回复内容"
      width="120">
    </el-table-column>
     <el-table-column
      prop="time"
      label="评价时间"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">回复</el-button>
        <el-button type="text" size="small" @click="delItem(scope.row,scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    
    </div>
   
  <el-dialog :visible.sync="dialogVisible">
  <!-- <img width="100%" :src="dialogImageUrl" alt=""> -->
  <el-form ref="form" :rules="rules" :model="form" label-width="80px">
  <el-form-item label="商品">
     <el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>

  </el-form-item>
  <el-form-item label="用户名称" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
 
  <el-form-item label="评价文字" prop='title'>
    <el-input type="textarea" v-model="form.title"></el-input>
  </el-form-item>
   <el-form-item label="评价文字" prop='num'>
      <el-rate
      v-model="num"
      show-text>
    </el-rate>
  </el-form-item>
   <el-form-item label="服务分数" prop='num1'>
      <el-rate
      v-model="num1"
      show-text>
    </el-rate>
  </el-form-item>
   <el-form-item label="商品">
     <el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>

  </el-form-item>
   <el-form-item label="商品">
     <el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>

  </el-form-item>
  <el-button type="primary" @click="setaddComment">提交</el-button>
  <el-button type="primary" @click="cancel">重置</el-button>
</el-form>
</el-dialog>
 
<el-pagination
    background
    layout="prev, pager, next"
    :page-size="pageSize"
    @current-change='currentChange'
    :total="total">
  </el-pagination>

  

</div>
</template>

<script>
// import axios from 'axios'
import {apiGetComment} from '@/api/comment.js'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
         value1: null,
        options: [{
          value: '已回复',
          label: '已回复'
        }, {
          value: '未回复',
          label: '未回复'
        }],
        value: '',
         tableData: [],//数据列表
         dialogVisible: false,//控制弹框
          dialogImageUrl: '',
           textarea: '',
           form: {
              name: '',
              title:'',
              num:1,
              num1:1,
        
        },
        pageIndex:1,//默认当前页面
       pageSize:10,//当前页面有多少数据
       total:0,//总数据
        rules:{
           name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
           title: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          num: [
            { type: 'number', required: true, message: '请选择日期', trigger: 'change' }
          ],
          num1: [
            { type: 'number', required: true, message: '请选择时间', trigger: 'change' }
          ],
          
         
        },
        search:'',
        search1:''
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
      handleClick(row) {
        console.log(row);
      },
     async currentChange(val){
          this.pageIndex=val;
          const res=await apiGetComment({
          pageIndex:this.pageIndex,
          pageSize:this.pageSize
        })
        console.log(res,'ssss')
        this.tableData=res.data;
        this.total=res.total;
      },
      cancel(){
        this.dialogVisible=false;
      },
      addComment(){
         this.dialogVisible=true;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      setaddComment(){
        this.tableData.push(this.form)
        console.log(this.tableData,'ttt')
        this.dialogVisible=false;
         this.form= {
              name: '',
              title:'',
              num:1,
              num1:1,
        
        }
      },
      delItem(row,index){
         this.tableData.splice(index,1)
      },
      searchItem(){
       this.tableData= this.tableData.filter(item=>{
         console.log(item)
          if(item.name.indexOf(this.search)!==-1){
             return item
          }
         
        })
      },
      searchUser(){
        this.tableData= this.tableData.filter(item=>{
         console.log(item)
          if(item.title.indexOf(this.search1)!==-1){
             return item
          }
         
        })
      }
    
},
//生命周期 - 创建完成（可以访问当前this实例）
// async created() {
//   const res=await axios('/getComment')
//   console.log(res)
//   this.tableData=res.data.data
// },
async created(){
  const res=await apiGetComment({
    pageIndex:this.pageIndex,
    pageSize:this.pageSize
  })
  console.log(res,'ssss')
  this.tableData=res.data;
  this.total=res.total;
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

}
}
</script>
<style lang='css' scoped>
.comment{
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
}
.header{
   width: 100%;
   margin-bottom: 10px;
}
img{
  width: 100px;
  height: 100px;
}
.time{
   width: 100%;
   height: 50px;
   line-height: 50px;
   display: flex;
   justify-content: space-around;
   margin-top: 10px;
}
.time span{
   display: flex;
   font-weight: bold;
}
.tab{
   flex: 1;
   display: flex;
   height: 35px;
   line-height: 35px;
   justify-content: space-around;
}
.btn1{
  width: 50px;
  height: 30px;
  border: none;
}
.imgs{
  width: 50px;
  height: 30px;
  border-radius: 5px;
}
.shop1{
  height: 40px;
  line-height: 40px;
}
input{
  height: 30px;
}
.state{
   display: flex;
}
.state div{
   margin-left: 10px;
}
.main{
  flex: 1;
  overflow-y: auto;
}
</style>